<template>
	<view class="Layout">
		<view class="header" :style="{backgroundColor: layoutStyle}">
			<view class="title">
				{{studyPathDetail.learningPathName}}
			</view>

			<view class="author">
				作者： AI生成
			</view>
		</view>


		<view class="content">
			<markdown :markdown="studyPathDetail.learningPathInfo"></markdown>
			<!-- {{studyPathDetail.learningPathInfo}} -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import apis from '../../api/apis';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const layoutStyle = ref({});
	onMounted(() => {
		// 生成随机背景色  
		const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
		// layoutStyle.value.backgroundColor = randomColor;  不用了
		layoutStyle.value = randomColor;
		console.log(layoutStyle.value)
	});

	const studyPathDetail = ref({})

	onLoad((e) => {
		// console.log(e)
		getStudyPathDetail(e.id);
	})
	// 获取具体的学习路线信息
	const getStudyPathDetail = (id) => {
		apis.getStudyPathDetailById(id).then((res) => {
			studyPathDetail.value = res.data
			console.log("学习路线：", studyPathDetail.value)
		})
	}
</script>

<style lang="scss" scoped>
	.Layout {
		padding: 20px;
		min-height: 100vh;//保证一直滑动,页面的高度一直占据,这样背景色啥的就一直存在
		max-width: 800px;
		margin: 0 auto;
		background-color: #f9f9f9;
		// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
		border-radius: 8px;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		// background-color: #4CAF50;  
		color: white;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}

	.author {
		font-size: 16px;
		margin-top: 10px;
		text-align: center;
		color: rgba(255, 255, 255, 0.7);
	}

	.content {
		padding: 0 20px;
		background-color: white;
		color: #333;
		font-size: 18px;
		line-height: 1.6;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	/* Placeholder for the actual content text */
	.content::placeholder {
		color: #999;
		font-style: italic;
	}

	/* Remove the placeholder pseudo-element if not needed */
	/* .content::placeholder {  
  display: none;  
} */
</style>